<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useRecipients from '@/hooks/reci/useRecipients';
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();

const {
    currentPage4,
    pageSize4,
    total4,
    country_code,
    country_name,
    recipientsList,
    dialog,
    recipientsList_data,
    rules,
    rules1,
    isEdit,
    cancel,
    handleSizeChange,
    handleCurrentChange,
    importRecipients,
    queryRecipientsList,
    handleAdd,
    handleAddsubmit,
    handleDelete
} = useRecipients()

onMounted(() => {
    queryRecipientsList();
})

let formrecipients = ref() // 抽屉表单对象



</script>

<template>
         <div class="spinner" v-if="counterStore.flag">
        <div class="spinnerin"></div>
    </div>
    <el-card>
        <el-form class="form">
            <el-form-item label="国家代码:" style="margin-right: 10px;">
                <el-input v-model="country_code" placeholder="请输入国家代码"></el-input>
            </el-form-item>
            <el-form-item label="国家名称:" style="margin-right: 10px;">
                <el-input v-model="country_name" placeholder="请输入国家名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="queryRecipientsList" type="primary">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <template #header>
            <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                icon-color="#626AEF" title="导入收件人会先清除原有收件人列表，请确认是否继续？" @confirm="importRecipients">
                <template #reference>
                    <el-button type="primary">导入收件人</el-button>
                </template>
            </el-popconfirm>
            <el-button type="primary" @click="handleAdd('', '', '','','','')">添加收件人</el-button>
        </template>
        <el-scrollbar style="height: calc(100vh - 350px);"> <!-- 菜单滚动条 -->
            <el-table :data="recipientsList" style="width: 100%">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="country_code" label="国家代码"></el-table-column>
                <el-table-column prop="country_name" label="国家名称"></el-table-column>
                <el-table-column prop="yk" label="央库"></el-table-column>
                <el-table-column prop="bs" label="保税"></el-table-column>
                <el-table-column prop="eu" label="欧盟"></el-table-column>
                <el-table-column prop="hq2" label="元器件"></el-table-column>
                <el-table-column label="操作" width="150px">
                    <template #default="scope">
                        <el-button size="small" type="success"
                            @click="handleAdd(scope.row.country_code, scope.row.country_name, scope.row.yk, scope.row.bs, scope.row.eu, scope.row.hq2)">编辑</el-button>
                        <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks"
                            icon="InfoFilled" icon-color="#626AEF" title="是否确认删除该国家?"
                            @confirm="handleDelete(scope.row.country_code)">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <footer style="margin: 10px 0;">
            <!-- 
                currentPage4: 当前页数
                pageSize4: 每页显示条数
                total4: 总条数
                handleSizeChange: 每页显示条目个数改变时触发
                handleCurrentChange: 当前页数改变时触发
             -->
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[3, 5, 7, 10, 15, 20]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total4" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </footer>
    </el-card>
    <!-- 抽屉 添加/编辑用户 -->
    <el-drawer ref="drawerRef" v-model="dialog" :title="isEdit ? '编辑收件人' : '添加收件人'" class="demo-drawer">
        <el-form ref="formrecipients" :model="recipientsList_data" :rules="isEdit ? rules1 : rules" label-width="80px">
            <el-form-item label="国家代码" prop="country_code">
                <el-input v-model="recipientsList_data.country_code" placeholder="请输入国家代码"
                    :disabled="isEdit"></el-input>
            </el-form-item>
            <el-form-item label="国家名称" prop="country_name">
                <el-input v-model="recipientsList_data.country_name" placeholder="请输入国家名称"></el-input>
            </el-form-item>
            <el-form-item label="央库">
                <el-input v-model="recipientsList_data.yk" placeholder="请输入央库收件人" :type="isEdit ? 'textarea' : 'text'"
                    autosize></el-input>
            </el-form-item>
            <el-form-item label="保税">
                <el-input v-model="recipientsList_data.bs" placeholder="请输入保税收件人" :type="isEdit ? 'textarea' : 'text'"
                    autosize></el-input>
            </el-form-item>
            <el-form-item label="欧盟">
                <el-input v-model="recipientsList_data.eu" placeholder="请输入欧盟收件人" :type="isEdit ? 'textarea' : 'text'"
                    autosize></el-input>
            </el-form-item>
            <el-form-item label="元器件">
                <el-input v-model="recipientsList_data.hq2" placeholder="请输入元器件收件人" :type="isEdit ? 'textarea' : 'text'"
                    autosize></el-input>
            </el-form-item>
            <el-form-item>
                <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否确认添加该国家?" @confirm="handleAddsubmit(formrecipients)">
                    <template #reference>
                        <el-button type="primary">提交</el-button>
                    </template>
                </el-popconfirm>

                <el-button type="danger" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

</template>

<style scoped lang="scss">
.form {
    height: 50px;
    display: flex;
}

.spinner {
  width: 3em;
  height: 3em;
  position: absolute;
  top: 50%;
  left: 50%;

  //最顶层
  z-index: 9999;
  cursor: not-allowed;
  border-radius: 50%;
  border: 2px solid #444;
  box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700;
  animation: rot55 0.7s linear infinite;
}

.spinnerin {
  border: 2px solid #444;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rot55 {
  to {
    transform: rotate(360deg);
  }
}

</style>